﻿<template>
  <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '40%' @close = 'resetForm'
  append-to-body :close-on-click-modal = "false" :close-on-press-escape = "false">
    <div v-loading = 'loading' v-if = 'row'>
      <el-radio-group v-model = "row.selectOption.remote" size = 'small' style = "margin-bottom:10px;display: block">
        <el-radio-button :label = "false">静态数据</el-radio-button>
        <el-radio-button :label = "true">服务数据</el-radio-button>
      </el-radio-group>
      <div v-if = 'row.selectOption.remote'>
        <el-form label-width = '100px'>
          <el-form-item label = '服务方法：'>
            <el-select v-model = "row.selectOption.remoteFunc" filterable clearable>
              <el-option v-for = 'eventItem in allEvents' :key = 'eventItem.no' :label = 'eventItem.name' :value = 'eventItem.no'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label = 'value名称：'>
            <el-input v-model = "row.selectOption.remoteProps.value"></el-input>
          </el-form-item>
          <el-form-item label = 'label名称：'>
            <el-input v-model = "row.selectOption.remoteProps.label"></el-input>
          </el-form-item>
          <el-form-item label = '服务词典表：' v-if = "Object.keys(row.selectOption).indexOf('inputDic')>=0">
            <el-input value = '点击设置选中的服务所需词典表' @focus = 'setOptionsEventsDic'></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-else>
        <div class = "addColumn">
          <p @click = "handleAddOption"> <i class = "iconfont icon-add"></i>添加静态数据</p>
        </div>
        <el-table :data = 'row.selectOption.staticOption' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
          <el-table-column align = 'center' label = 'value名称'>
            <template slot-scope = "scope">
              <el-input v-model = "scope.row.value" placeholder = '请输入'></el-input>
            </template>
          </el-table-column>
          <el-table-column align = 'center' label = 'label名称'>
            <template slot-scope = "scope">
              <el-input v-model = "scope.row.label" placeholder = '请输入'></el-input>
            </template>
          </el-table-column>
          <el-table-column align = "center" label = "操作" width = "30">
            <template slot-scope = "scope">
              <el-button type = "text" size = "mini" @click = "handleOptionsRemove(scope.$index)" title = '移除'>
                <i class = "iconfont icon-shanchu"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class = 'buttonContent'>
        <el-button type = "info" @click = "resetForm">取 消</el-button>
        <el-button type = "primary" @click = "submitForm">确 定</el-button>
      </div>
    </div>
    <!-- 设置下拉框的词典表时 -->
    <Event-Dic :row = 'selectEventsInfo' :eventDicDialog = 'eventDicDialog' @sureSeetingEventDic = 'sureSeetingEventDic' @giveUp = 'eventDicDialog = false'></Event-Dic>
  </el-dialog>
</template>

<script>
import EventDic from '@/components/Events/EventsDic.vue'
export default {
  components: {
    EventDic
  },
  props: ['row', 'editTableOptionDialog'],
  data () {
    return {
      dialogTitle: '设置可编辑表格的下拉框数据来源',
      dialogFormVisible: false,
      allEvents: [],
      loading: false,
      // 设置所选服务的词典表
      eventDicDialog: false,
      selectEventsInfo: {
        inputDic: [],
        outputDic: [],
        eventsNo: ''
      }
    }
  },
  methods: {
    // 获取所有的动态表单事件
    getAllEvents () {
      this.loading = true
      this.allEvents = []
      this.$get('/events4dform/alllist').then(data => {
        this.loading = false
        if (data.data.result.code === 'success') {
          this.allEvents = data.data.result.data
        } else if (data.data.result.code === 'failed') {
          this.$message({
            message: data.data.result.msg,
            type: 'warning'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 添加时
    handleAddOption () {
      this.row.selectOption.staticOption.push({
        value: '值1',
        label: 'label1'
      })
    },
    // 删除时
    handleOptionsRemove (index) {
      this.row.selectOption.staticOption.splice(index, 1)
    },
    // 设置下拉框的词典表时
    setOptionsEventsDic () {
      if (this.row.selectOption.remote && !this.row.selectOption.remoteFunc) {
        this.$message({
          message: '请先选择服务方法',
          type: 'warning'
        })
      } else {
        this.selectEventsInfo = {
          inputDic: this.row.selectOption.inputDic.length ? JSON.parse(JSON.stringify(this.row.selectOption.inputDic)) : [],
          outputDic: this.row.selectOption.outputDic.length ? JSON.parse(JSON.stringify(this.row.selectOption.outputDic)) : [],
          eventsNo: this.row.selectOption.remoteFunc
        }
        this.eventDicDialog = true
      }
    },
    // 设置词典表成功时
    sureSeetingEventDic (fromSetting) {
      this.eventDicDialog = false
      this.row.selectOption.inputDic = fromSetting.inputDic
      this.row.selectOption.outputDic = fromSetting.outputDic
    },
    // 取消时
    resetForm () {
      this.$emit('giveUp')
    },
    // 确定时
    submitForm () {
      let toParent = {
        remote: this.row.selectOption.remote,
        remoteFunc: this.row.selectOption.remoteFunc,
        remoteOption: this.row.selectOption.remoteOption,
        remoteProps: this.row.selectOption.remoteProps,
        staticOption: this.row.selectOption.staticOption,
        inputDic: this.row.selectOption.inputDic ? this.row.selectOption.inputDic : [],
        outputDic: this.row.selectOption.outputDic ? this.row.selectOption.outputDic : []
      }
      this.$emit('sureSeetingEditTableOption', toParent)
    }
  },
  watch: {
    editTableOptionDialog: {
      handler (val) {
        this.dialogFormVisible = val
        if (val) {
          this.getAllEvents()
        }
      },
      deep: true
    }
  }
}
</script>

<style lang = 'scss' scoped>
.buttonContent{
  text-align: center;
  margin-top: 16px;
}
</style>
